
// 首页业务
// 从本地获取用户名
const user = localStorage.getItem('user')
document.querySelector('.username').innerHTML = user
// 页面鉴权
checkLogin()
// 退出登录
logout()

// 渲染统计数据
async function getData() {
  // 通过token获取数据
  const token = localStorage.getItem('token')
  const {data:{groupData,overview,year,salaryData,provinceData}} = await axios.get('/dashboard')
  // Object.keys(overview)拿到对象中的属性放到数组中
  // console.log(overview);
  // console.log(Object.keys(overview));
  renderOverview(overview)
  // 薪资走势
  renderYearSalary(year)
  // 薪资分布
  renderSalary(salaryData)
  // 分组数据
  renderGroup(groupData)
  // 男女薪资
  renderGenderData(salaryData)
  // 籍贯
  renderProvince(provinceData)
}
getData()

 // 1.概览业务 - overview
 function renderOverview(overview){
  Object.keys(overview).forEach((key)=>{
    document.querySelector(`.${key}`).innerHTML = overview[key]
  })
}
// 2.薪资走势 -year
function renderYearSalary(year){
// 初始化echarts实例
const myChart = echarts.init(document.querySelector('#line'))
const option = {
  title:{
    text:'2024全学科薪资走势',
      left:13,
      top:10
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: year.map(item=>item.month),
    axisLine:{
      lineStyle:{
        color:'#999',
        type:'dashed'
      }
    }
  },
  yAxis: {
    type: 'value',
    splitLine:{
      lineStyle:{
        type:'dashed'
      }
    }
  },
  // 系列图表配置
  series: [
    {
      data: year.map(item=>item.salary),
      type: 'line',
      smooth:true,
      areaStyle: {color:{
        type:'linear',
        x:0,
        y:0,
        x2:0,
        y2:1,
        colorStops:[{
          offset:0,color:'#7cc5f9'
        },{
          offset:1,color:'#f4faff'
        }]
      }},
      // 标记的大小
      symbolSize:8,
      // 线条样式
      lineStyle:{
        width:5,
        color:{
          type:'linear',
          x:0,
          y:0,
          x2:0,
          y2:1,
          colorStops:[{
            offset:0,color:'#0fa0f5'
          },{
            offset:1,color:'#5576f7'
          }]
        }
      }
    }
  ]
};
myChart.setOption(option)
}

//3.薪资分布 - salaryData
function renderSalary(salaryData){
// 实例化echarts
const myChart = echarts.init(document.querySelector('#salary'))
// 设置配置项目
const option = {
  title:{
    text:'班级薪资分布',
    letf:10,
    top:10
  },
  // 提示组件
  tooltip: {
    trigger: 'item',
    data:['班级薪资分布']
  },
  legend: {
    bottom: '5%',
    left: 'center'
  },
  series: [
    {
      // 和提示组件中的data保持一致
      name: '班级薪资分布',
      type: 'pie',
      radius: ['50%', '60%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
    
      labelLine: {
        show: false
      },
      data: salaryData.map(item=>{
        return{value:item.g_count+item.b_count,name:item.label}
      })
      //[
      //   { value: 1048, name: 'Search Engine' },
      //   { value: 735, name: 'Direct' },
      //   { value: 580, name: 'Email' },
      //   { value: 484, name: 'Union Ads' }
      // ]

    }
  ],
  color:['#fb9a15','#3f8cfb','#2bb8fb','#23d392']
};
// 拿到配置项，显示图表
myChart.setOption(option)
}

//4.分组数据 - groupData
function renderGroup (groupData){
  // 实例化echarts
  const myChart = echarts.init(document.querySelector('#lines'))
  // 设置配置项目
  const option = {
    xAxis: {
      type: 'category',
      // 学生姓名
      data: groupData[1].map(item=>item.name),
      axisLine:{
        lineStyle:{
          color:'#999',
          type:'dashed'
        }
      }
    },
    yAxis: {
      type: 'value',
      splitLine:{
        lineStyle:{
          type:'dashed'
        }
      }
    },
    series: [
      {
        // 期望薪资
        data: groupData[1].map(item=>item.hope_salary),
        type: 'bar',
        itemStyle:{
          color:{
            type:'linear',
            x:0,
            y:0,
            x2:0,
            y2:1,
            colorStops:[{
              offset:0,color:'#70d2a2'
            },{
              offset:1,color:'#ccefde' 
            }]
          }
        }
      },
      {
        // 实际薪资
        data: groupData[1].map(item=>item.salary),
        type: 'bar',
        itemStyle:{
          color:{
            type:'linear',
            x:0,
            y:0,
            x2:0,
            y2:1,
            colorStops:[{
              offset:0,color:'#6faff9'
            },{
              offset:1,color:'#d2e3f8' 
            }]
          }
        }
      }
    ]
  };
  // 拿到配置项，显示图表
  myChart.setOption(option)

  // 点击切换数据并高亮
  const btns = document.querySelector('#btns')
  btns.addEventListener('click', function (e) {
    if(e.target.classList.contains('btn')){
      // 删除类
      document.querySelector('.btn-blue').classList.remove('btn-blue')
      // 添加类
      e.target.classList.add('btn-blue')

      // 点击不同分组，显示不同数据
      // 展示不同的数据,核心是修改什么?
      // 答:option内的配置(索引) xAxis轴中的data值 series中对象内data值
      const index = e.target.innerHTML
      option.xAxis.data = groupData[index].map(item=>item.name)
      option.series[0].data = groupData[index].map(item=>item.hope_salary)
      option.series[1].data = groupData[index].map(item=>item.salary)
      // 重新设置配置项,显示图表
      myChart.setOption(option)
    }
  })
}

// 5.男女薪资分布 - slalry
function renderGenderData(salary){
  // 实例化echarts
  const myChart = echarts.init(document.querySelector('#gender'))

  // const datas = [
  //   [
  //     { name: '圣彼得堡来客', value: 5.6 },
  //     { name: '陀思妥耶夫斯基全集', value: 1 },
  //     { name: '史记精注全译（全6册）', value: 0.8 },
  //     { name: '其它', value: 3.8 }
  //   ],
  //   [
  //     { name: '克莱因壶', value: 3.5 },
  //     { name: '投资最重要的事', value: 2.8 },
  //     { name: '简读中国史', value: 1.7 },
  //     { name: '你当像鸟飞往你的山', value: 1.4 }
      
  //   ]
  // ];
  // 二维数组 [[],[]] 故两次map
  const datas = [
    salary.map(item=>{
      return {name:item.label,value:item.b_count}
    }),
    salary.map(item=>{
      return {name:item.label,value:item.g_count}
    })
  ]
  const option = {
    title:[
      {
      text: '男女薪资分布',
      left: 'left',
      textStyle: {
        color: '#999',
        fontWeight: 'normal',
        fontSize: 14
      }
    },
    {
      text: '男生',
      left: 'center',
      top:'45%',
      textStyle: {
        color: '#999',
        fontWeight: 'normal',
        fontSize: 14
      }
    },
     {
      text: '女生',
      left: 'center',
      bottom:'5%',
      textStyle: {
        color: '#999',
        fontWeight: 'normal',
        fontSize: 14
      }
    }],
    tooltip:{
      trigger:'item'
    },
    series: datas.map(function (data, idx) {
      const top = idx * 40 + 10;
      return {
        type: 'pie',
        radius: [45, 60],
        top: top + '%',
        height: '33.33%',
        left: 'center',
        width: 400,
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 1
        },
       
        data: data,
        color:['#f2a33a','#5198f7','#56bdf7','#62d499']
      };
    })
  };
  // 拿到配置项，显示图表
  myChart.setOption(option)
}

//6.籍贯分布 - provinceData
function renderProvince(mapData){
  // 实例化echarts
  const myChart = echarts.init(document.querySelector('#map'))
  const dataList = [
    { name: '南海诸岛', value: 0 },
    { name: '北京', value: 0 },
    { name: '天津', value: 0 },
    { name: '上海', value: 0 },
    { name: '重庆', value: 0 },
    { name: '河北', value: 0 },
    { name: '河南', value: 0 },
    { name: '云南', value: 0 },
    { name: '辽宁', value: 0 },
    { name: '黑龙江', value: 0 },
    { name: '湖南', value: 0 },
    { name: '安徽', value: 0 },
    { name: '山东', value: 0 },
    { name: '新疆', value: 0 },
    { name: '江苏', value: 0 },
    { name: '浙江', value: 0 },
    { name: '江西', value: 0 },
    { name: '湖北', value: 0 },
    { name: '广西', value: 0 },
    { name: '甘肃', value: 0 },
    { name: '山西', value: 0 },
    { name: '内蒙古', value: 0 },
    { name: '陕西', value: 0 },
    { name: '吉林', value: 0 },
    { name: '福建', value: 0 },
    { name: '贵州', value: 0 },
    { name: '广东', value: 0 },
    { name: '青海', value: 0 },
    { name: '西藏', value: 0 },
    { name: '四川', value: 0 },
    { name: '宁夏', value: 0 },
    { name: '海南', value: 0 },
    { name: '台湾', value: 0 },
    { name: '香港', value: 0 },
    { name: '澳门', value: 0 },
  ]
 const option = {
    title: {
      text: '籍贯分布',
      top: 10,
      left: 10,
      textStyle: {
        fontSize: 16,
      },
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} 位学员',
      borderColor: 'transparent',
      backgroundColor: 'rgba(0,0,0,0.5)',
      textStyle: {
        color: '#fff',
      },
    },
    visualMap: {
      min: 0,
      max: 6,
      left: 'left',
      bottom: '20',
      text: ['6', '0'],
      inRange: {
        color: ['#ffffff', '#0075F0'],
      },
      show: true,
      left: 40,
    },
    geo: {
      map: 'china',
      roam: false,
      zoom: 1.0,
      label: {
        normal: {
          show: true,
          fontSize: '10',
          color: 'rgba(0,0,0,0.7)',
        },
      },
      itemStyle: {
        normal: {
          borderColor: 'rgba(0, 0, 0, 0.2)',
          color: '#e0ffff',
        },
        emphasis: {
          areaColor: '#34D39A',
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 20,
          borderWidth: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
    series: [
      {
        name: '籍贯分布',
        type: 'map',
        geoIndex: 0,
        data: dataList,
      },
    ],
  }
  // 拿到配置项，显示图表
  myChart.setOption(option)
}